import React, { FC, useState } from 'react'
import { Popup, Space, Button } from 'antd-mobile'
import welfareUrl from '@/assets/images/order_card_welfare_pic_2x.png'
import { GoodsData, OthersData } from '@/types/product'
import WelfareSelect from './welfareSelect'

interface welfareParam {
  goodsData?: GoodsData
  othersData?: OthersData
}
const welfare: FC<welfareParam> = (props) => {
  const [select, setSelect] = useState(false)

  return (
    <>
      <div
        className="w-full bg-white leading-r2.9 text-gray-666666 "
        onClick={() => setSelect(true)}
      >
        <img className=" w-r2.5 h-auto mr-r0.4 -mt-r0.4 inline-block" src={welfareUrl}></img>
        <span className="leading-r2.9  float-right font-medium text-gray-868D9A">
          <i className="w-r2.0 h-r2.0 iconfont icon-icon_arrow_right"></i>
        </span>
        {props.othersData && props.othersData.giftsDetails.length > 0 ? (
          <span className="leading-r2.9   float-right">
            其他赠品 x {props.othersData.giftsDetails.length}
          </span>
        ) : null}

        {props.goodsData && props.goodsData.giftProductNum ? (
          <span className=" leading-r2.9 float-right ">
            讲义福利 x {props.goodsData.giftProductNum} {'·'}
          </span>
        ) : null}
      </div>
      {select ? (
        <WelfareSelect
          goodsData={props.goodsData}
          othersData={props.othersData}
          setVisible={setSelect}
        ></WelfareSelect>
      ) : null}
    </>
  )
}

export default welfare
